diff --git a/swh/web/assets/src/bundles/browse/browse-utils.js b/swh/web/assets/src/bundles/browse/browse-utils.js
index 4568e5eb..54e0030d 100644
--- a/swh/web/assets/src/bundles/browse/browse-utils.js
+++ b/swh/web/assets/src/bundles/browse/browse-utils.js
@@ -1,97 +1,76 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
-export function initBrowse(page) {
+$(document).ready(() => {
 
-  $(document).ready(() => {
-
-    $('.dropdown-submenu a.dropdown-item').on('click', e => {
-      $(e.target).next('div').toggle();
-      if ($(e.target).next('div').css('display') !== 'none') {
-        $(e.target).focus();
-      } else {
-        $(e.target).blur();
-      }
-      e.stopPropagation();
-      e.preventDefault();
-    });
+  $('.dropdown-submenu a.dropdown-item').on('click', e => {
+    $(e.target).next('div').toggle();
+    if ($(e.target).next('div').css('display') !== 'none') {
+      $(e.target).focus();
+    } else {
+      $(e.target).blur();
+    }
+    e.stopPropagation();
+    e.preventDefault();
+  });
 
-    // ensure branches/releases dropdowns are reparented to body to avoid
-    // overflow issues
-    $('#swh-branches-releases-dd').on('shown.bs.dropdown', function() {
-      $('body').append($('#swh-branches-releases-dd').css({
-        position: 'absolute',
-        left: $('#swh-branches-releases-dd').offset().left,
-        top: $('#swh-branches-releases-dd').offset().top
-      }).detach());
-      // ensure breadcrumbs stay at the same position
-      let bcOffsetLeft = $('#swh-branches-releases-dd').offset().left +
+  // ensure branches/releases dropdowns are reparented to body to avoid
+  // overflow issues
+  $('#swh-branches-releases-dd').on('shown.bs.dropdown', function() {
+    $('body').append($('#swh-branches-releases-dd').css({
+      position: 'absolute',
+      left: $('#swh-branches-releases-dd').offset().left,
+      top: $('#swh-branches-releases-dd').offset().top
+    }).detach());
+    // ensure breadcrumbs stay at the same position
+    let bcOffsetLeft = $('#swh-branches-releases-dd').offset().left +
         $('#swh-branches-releases-dd').width();
-      let bcOffsetTop = $('.swh-browse-bread-crumbs').offset().top;
-      $('.swh-browse-bread-crumbs').css('position', 'absolute');
-      $('.swh-browse-bread-crumbs').offset({'left': bcOffsetLeft, 'top': bcOffsetTop});
-    });
+    let bcOffsetTop = $('.swh-browse-bread-crumbs').offset().top;
+    $('.swh-browse-bread-crumbs').css('position', 'absolute');
+    $('.swh-browse-bread-crumbs').offset({'left': bcOffsetLeft, 'top': bcOffsetTop});
+  });
 
-    $('.swh-metadata-toggler').popover({
-      boundary: 'viewport',
-      container: 'body',
-      html: true,
-      template: `<div class="popover" role="tooltip">
+  $('.swh-metadata-toggler').popover({
+    boundary: 'viewport',
+    container: 'body',
+    html: true,
+    template: `<div class="popover" role="tooltip">
                    <div class="arrow"></div>
                    <h3 class="popover-header"></h3>
                    <div class="popover-body swh-metadata"></div>
                  </div>`,
-      content: function() {
-        var content = $(this).attr('data-popover-content');
-        return $(content).children('.popover-body').html();
-      },
-      title: function() {
-        var title = $(this).attr('data-popover-content');
-        return $(title).children('.popover-heading').html();
-      },
-      offset: '50vh'
-    });
-
-    $('.swh-vault-menu a.dropdown-item').on('click', e => {
-      $('.swh-metadata-toggler').popover('hide');
-    });
-
-    $('.swh-metadata-toggler').on('show.bs.popover', () => {
-      $('.swh-vault-menu .dropdown-menu').hide();
-    });
-
-    $('.swh-actions-dropdown').on('hide.bs.dropdown', () => {
-      $('.swh-vault-menu .dropdown-menu').hide();
-      $('.swh-metadata-toggler').popover('hide');
-    });
-
-    $('body').on('click', e => {
-      if ($(e.target).parents('.swh-metadata').length) {
-        e.stopPropagation();
-      }
-    });
+    content: function() {
+      var content = $(this).attr('data-popover-content');
+      return $(content).children('.popover-body').html();
+    },
+    title: function() {
+      var title = $(this).attr('data-popover-content');
+      return $(title).children('.popover-heading').html();
+    },
+    offset: '50vh'
+  });
 
-    $(`.browse-${page}-item`).addClass('active');
-    $(`.browse-${page}-link`).addClass('active');
+  $('.swh-vault-menu a.dropdown-item').on('click', e => {
+    $('.swh-metadata-toggler').popover('hide');
+  });
 
-    $(`.browse-main-link`).click(event => {
-      let lastBrowsePage = sessionStorage.getItem('last-browse-page');
-      if (lastBrowsePage) {
-        event.preventDefault();
-        window.location = lastBrowsePage;
-      }
-    });
+  $('.swh-metadata-toggler').on('show.bs.popover', () => {
+    $('.swh-vault-menu .dropdown-menu').hide();
+  });
 
-    window.onunload = () => {
-      if (page === 'main') {
-        sessionStorage.setItem('last-browse-page', window.location);
-      }
-    };
+  $('.swh-actions-dropdown').on('hide.bs.dropdown', () => {
+    $('.swh-vault-menu .dropdown-menu').hide();
+    $('.swh-metadata-toggler').popover('hide');
+  });
 
+  $('body').on('click', e => {
+    if ($(e.target).parents('.swh-metadata').length) {
+      e.stopPropagation();
+    }
   });
 
-}
+});
diff --git a/swh/web/assets/src/bundles/browse/browse.css b/swh/web/assets/src/bundles/browse/browse.css
index ce41c915..106ffc2a 100644
--- a/swh/web/assets/src/bundles/browse/browse.css
+++ b/swh/web/assets/src/bundles/browse/browse.css
@@ -1,110 +1,106 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
-.navbar-header a,
-ul.dropdown-menu a,
-ul.navbar-nav a {
-    border-bottom-style: none;
-    color: #323232;
-    font-weight: 700;
-}
+
 
 .swh-browse-nav li a {
     border-radius: 4px;
 }
 
-.nav-link.active {
-    background-color: #e7e7e7;
-}
-
 .scrollable-menu {
     max-height: 180px;
     overflow-x: hidden;
 }
 
 .swh-corner-ribbon {
     width: 200px;
     background: #e43;
     position: absolute;
     text-align: center;
     line-height: 50px;
     letter-spacing: 1px;
     color: #f0f0f0;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
     top: 55px;
     right: -50px;
     left: auto;
     transform: rotate(45deg);
     z-index: 2000;
 }
 
 .swh-loading {
     display: none;
+    text-align: center;
+    margin-top: 10px;
 }
 
 .swh-loading.show {
     display: block;
 }
 
 .swh-metadata-table-row {
     border-top: 1px solid #ddd !important;
 }
 
 .swh-metadata-table-key {
     min-width: 200px;
     max-width: 200px;
     width: 200px;
 }
 
 .swh-metadata-table-value pre {
     white-space: pre-wrap;
 }
 
 .swh-table-even-odd th {
     border-top: none;
 }
 
 .swh-table-even-odd tr:nth-child(even) {
     background-color: #f5f5f5;
 }
 
 .swh-table-even-odd tr:nth-child(odd) {
     background-color: #fff;
 }
 
 .swh-table-cell-text-overflow {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .swh-directory-table {
     margin-bottom: 0;
 }
 
 .swh-directory-table td {
     border-top: 1px solid #ddd !important;
 }
 
 .swh-title-color {
     color: #e20026;
 }
 
 .swh-log-entry-message {
     min-width: 460px;
     max-width: 460px;
     width: 460px;
 }
 
 .swh-metadata {
     max-height: 50vh;
     max-width: 41vw;
     overflow-y: auto;
     overflow-x: auto;
     padding: 0;
     padding-right: 1.4em;
-}
\ No newline at end of file
+}
+
+.swh-search-pagination {
+    margin-top: 5px;
+}
diff --git a/swh/web/assets/src/bundles/vendors/index.js b/swh/web/assets/src/bundles/vendors/index.js
index 749a6771..d14e735f 100644
--- a/swh/web/assets/src/bundles/vendors/index.js
+++ b/swh/web/assets/src/bundles/vendors/index.js
@@ -1,28 +1,31 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 // vendors bundles centralizing assets used in all swh-web applications
 
 // polyfills in order to use advanded js features (like Promise or fetch)
 // in older browsers
 import 'babel-polyfill';
 import 'whatwg-fetch';
 
 // jquery and bootstrap
 import 'jquery';
 import 'bootstrap-loader/lib/bootstrap.loader?configFilePath=../../../swh/web/assets/config/.bootstraprc!bootstrap-loader/no-op.js';
 
 // jquery datatables
 import 'datatables.net';
 import 'datatables.net-bs4/css/dataTables.bootstrap4.css';
 import './datatables.css';
 
+// admin-lte scripts
+import 'admin-lte';
+
 // web fonts
 import 'typeface-alegreya';
 import 'typeface-alegreya-sans';
 import 'font-awesome/css/font-awesome.css';
 import 'octicons/build/font/octicons.css';
diff --git a/swh/web/assets/src/bundles/webapp/breadcrumbs.css b/swh/web/assets/src/bundles/webapp/breadcrumbs.css
index 3c5cc50e..e9dbdb76 100644
--- a/swh/web/assets/src/bundles/webapp/breadcrumbs.css
+++ b/swh/web/assets/src/bundles/webapp/breadcrumbs.css
@@ -1,31 +1,32 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 .bread-crumbs {
     display: inline-block;
-    overflow: hidden;
+    /* overflow: hidden; */
     color: rgba(0, 0, 0, 0.55);
 }
 
 .bread-crumbs ul {
     list-style-type: none;
+    height: 100%;
 }
 
 .bread-crumbs li {
     float: left;
     list-style-type: none;
 }
 
 .bread-crumbs a {
     color: rgba(0, 0, 0, 0.75);
     border-bottom-style: none;
 }
 
 .bread-crumbs a:hover {
     color: rgba(0, 0, 0, 0.85);
     text-decoration: underline;
 }
diff --git a/swh/web/assets/src/bundles/webapp/index.js b/swh/web/assets/src/bundles/webapp/index.js
index fbc386ee..dfeb6e8f 100644
--- a/swh/web/assets/src/bundles/webapp/index.js
+++ b/swh/web/assets/src/bundles/webapp/index.js
@@ -1,20 +1,22 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 // webapp entrypoint bundle centralizing global custom stylesheets
 // and utility js modules used in all swh-web applications
 
 // explicitely import the vendors bundle
 import '../vendors';
 
 // global swh-web custom stylesheets
 import './webapp.css';
 import './breadcrumbs.css';
 
+export * from './webapp-utils';
+
 // utility js modules
 export * from './code-highlighting';
 export * from './markdown-rendering';
diff --git a/swh/web/assets/src/bundles/webapp/webapp-utils.js b/swh/web/assets/src/bundles/webapp/webapp-utils.js
new file mode 100644
index 00000000..a67dc813
--- /dev/null
+++ b/swh/web/assets/src/bundles/webapp/webapp-utils.js
@@ -0,0 +1,53 @@
+$(document).ready(() => {
+  // restore previous sidebar state (collapsed/expanded)
+  let collapseSidebar = false;
+  let previousSidebarState = localStorage.getItem('swh-sidebar-collapsed');
+  if (previousSidebarState !== undefined) {
+    collapseSidebar = JSON.parse(previousSidebarState);
+  }
+  if (collapseSidebar) {
+    // hack to avoid animated transition for collasping sidebar
+    // when loading a page
+    let sidebarTransition = $('.main-sidebar, .main-sidebar:before').css('transition');
+    let sidebarEltsTransition = $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition');
+    $('.main-sidebar, .main-sidebar:before').css('transition', 'none');
+    $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', 'none');
+    $('body').addClass('sidebar-collapse');
+    // restore transitions for user navigation
+    setTimeout(() => {
+      $('.main-sidebar, .main-sidebar:before').css('transition', sidebarTransition);
+      $('.sidebar .nav-link p, .main-sidebar .brand-text, .sidebar .user-panel .info').css('transition', sidebarEltsTransition);
+    });
+  }
+
+  // redirect to last browse page if any when clicking on the 'Browse' entry
+  // in the sidebar
+  $(`.swh-browse-link`).click(event => {
+    let lastBrowsePage = sessionStorage.getItem('last-browse-page');
+    if (lastBrowsePage) {
+      event.preventDefault();
+      window.location = lastBrowsePage;
+    }
+  });
+});
+
+export function initPage(page) {
+
+  $(document).ready(() => {
+    // set relevant sidebar link to page active
+    $(`.swh-${page}-item`).addClass('active');
+    $(`.swh-${page}-link`).addClass('active');
+
+    // triggered when unloading the current page
+    window.onunload = () => {
+      // backup sidebar state (collapsed/expanded)
+      let sidebarCollapsed = $('body').hasClass('sidebar-collapse');
+      localStorage.setItem('swh-sidebar-collapsed', JSON.stringify(sidebarCollapsed));
+      // backup current browse page
+      if (page === 'browse') {
+        sessionStorage.setItem('last-browse-page', window.location);
+      }
+    };
+
+  });
+}
diff --git a/swh/web/assets/src/bundles/webapp/webapp.css b/swh/web/assets/src/bundles/webapp/webapp.css
index 02bad88f..71206385 100644
--- a/swh/web/assets/src/bundles/webapp/webapp.css
+++ b/swh/web/assets/src/bundles/webapp/webapp.css
@@ -1,286 +1,331 @@
 /**
  * Copyright (C) 2018  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
  */
 
 html {
     height: 100%;
     overflow-x: hidden;
 }
 
 body {
     min-height: 100%;
     margin: 0;
     position: relative;
     padding-bottom: 120px;
 }
 
 a {
     border-bottom-style: none;
     outline: none;
 }
 
 code {
     background-color: #f9f2f4;
 }
 
 pre code {
     background-color: transparent;
 }
 
 footer {
     background-color: #262626;
     color: #fff;
     font-size: 0.8rem;
     position: absolute;
     bottom: 0;
     width: 100%;
     padding-top: 20px;
     padding-bottom: 20px;
 }
 
 footer a,
 footer a:visited {
     color: #fecd1b;
 }
 
 footer a:hover {
     text-decoration: underline;
 }
 
 pre {
     background-color: #f5f5f5;
     border: 1px solid #ccc;
     border-radius: 4px;
     padding: 9.5px;
     font-size: 0.8rem;
 }
 
 .btn.active {
     background-color: #e7e7e7;
 }
 
 .card {
     margin-bottom: 5px !important;
     overflow-x: auto;
 }
 
 .navbar-brand {
     padding: 5px;
     margin-right: 0;
 }
 
 .table {
     margin-bottom: 0;
 }
 
 .swh-web-app-link a {
     text-decoration: none;
     outline: none;
     border: none;
 }
 
 .swh-web-app-link:hover {
     background-color: #efeff2;
 }
 
 .table > thead > tr > th {
     border-top: none;
     border-bottom: 1px solid #e20026;
 }
 
 .table > tbody > tr > td {
     border-style: none;
 }
 
 .sitename .first-word,
 .sitename .second-word {
     color: rgba(0, 0, 0, 0.75);
     font-weight: normal;
     font-size: 1.2rem;
 }
 
 .sitename .first-word {
     font-family: 'Alegreya Sans', sans-serif;
 }
 
 .sitename .second-word {
     font-family: 'Alegreya', serif;
 }
 
 .swh-api-doc-route-upcoming > td,
 .swh-api-doc-route-upcoming > td > a {
     font-size: 90%;
 }
 
 .swh-api-doc-route-deprecated > td,
 .swh-api-doc-route-deprecated > td > a {
     color: red;
 }
 
 .swh-api-doc p {
     margin-bottom: 0;
 }
 
 .swh-api-doc dt {
     text-align: right;
 }
 
 .swh-counter {
     font-size: 150%;
 }
 
 .swh-http-error {
     margin: 0 auto;
     text-align: center;
 }
 
 .swh-http-error-head {
     color: #2d353c;
     font-size: 30px;
 }
 
 .swh-http-error-code {
     bottom: 60%;
     color: #2d353c;
     font-size: 96px;
     line-height: 80px;
     margin-bottom: 10px !important;
 }
 
 .swh-http-error-desc {
     font-size: 12px;
     color: #647788;
     text-align: center;
 }
 
 .swh-http-error-desc pre {
     display: inline-block;
     text-align: left;
     max-width: 800px;
     white-space: pre-wrap;
 }
 
 .popover {
     max-width: 100%;
 }
 
 .modal {
     text-align: center;
     padding: 0 !important;
 }
 
 .modal::before {
     content: '';
     display: inline-block;
     height: 100%;
     vertical-align: middle;
     margin-right: -4px;
 }
 
 .modal-dialog {
     display: inline-block;
     text-align: left;
     vertical-align: middle;
 }
 
 .dropdown-submenu {
     position: relative;
 }
 
 .dropdown-submenu .dropdown-menu {
     top: 0;
     left: -100%;
     margin-top: -5px;
     margin-left: -2px;
 }
 
 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
 a.dropdown-left::before {
     content: "\f0d9";
     font-family: 'FontAwesome';
     display: block;
     width: 20px;
     height: 20px;
     float: left;
     margin-left: 0;
 }
 
-#swh-navbar-collapse {
+#swh-navbar {
     border-top-style: none;
     border-left-style: none;
     border-right-style: none;
     border-bottom: 5px solid;
     border-image: linear-gradient(to right, rgb(226, 0, 38) 0%, rgb(254, 205, 27) 100%) 1 1 1 1;
     width: 100%;
     padding: 5px;
     margin-bottom: 20px;
     margin-top: 30px;
 }
 
 #back-to-top {
     display: initial;
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 10;
 }
 
 #back-to-top a img {
     display: block;
     width: 32px;
     height: 32px;
     background-size: 32px 32px;
     text-indent: -999px;
     overflow: hidden;
 }
 
 .swh-top-bar {
     direction: ltr;
     height: 30px;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     min-width: 600px;
     z-index: 99999;
     background-color: #262626;
     color: #fff;
     text-align: center;
     font-size: 14px;
 }
 
 .swh-top-bar ul {
     margin-top: 4px;
     margin-left: 28px;
 }
 
 .swh-top-bar li {
     display: inline;
     margin-left: 10px;
     margin-right: 10px;
 }
 
 .swh-top-bar a,
 .swh-top-bar a:visited {
     color: #fecd1b;
 }
 
 .swh-top-bar a.swh-current-site,
 .swh-top-bar a.swh-current-site:visited {
     color: #e20026;
 }
 
 .swh-donate-link {
     border: 1px solid #fecd1b;
     background-color: #e20026;
     color: white !important;
     padding: 3px;
     border-radius: 3px;
+}
+
+.swh-navbar-content h4 {
+    padding-top: 7px;
+}
+
+.swh-navbar-content .bread-crumbs {
+    display: block;
+    margin-left: -40px;
+}
+
+.swh-navbar-content .bread-crumbs li.bc-no-root {
+    padding-top: 7px;
+}
+
+.main-sidebar {
+    margin-top: 30px;
+}
+
+.content-wrapper {
+    background: none;
+}
+
+.brand-image {
+    max-height: 40px;
+}
+
+.brand-link {
+    padding-top: 18.5px;
+    padding-bottom: 18px;
+    padding-left: 4px;
+    border-bottom: 5px solid #e20026 !important;
+}
+
+.navbar-header a,
+ul.dropdown-menu a,
+ul.navbar-nav a,
+ul.nav-sidebar a {
+    border-bottom-style: none;
+    color: #323232;
+}
+
+.swh-sidebar .nav-link.active {
+    color: #323232 !important;
+    background-color: #e7e7e7 !important;
 }
\ No newline at end of file
diff --git a/swh/web/static/img/swh-api.png b/swh/web/static/img/swh-api.png
index 29da830a..82448f1f 100644
Binary files a/swh/web/static/img/swh-api.png and b/swh/web/static/img/swh-api.png differ
diff --git a/swh/web/static/img/swh-browse.png b/swh/web/static/img/swh-browse.png
index 19f39701..afa483cf 100644
Binary files a/swh/web/static/img/swh-browse.png and b/swh/web/static/img/swh-browse.png differ
diff --git a/swh/web/static/img/swh-vault.png b/swh/web/static/img/swh-vault.png
new file mode 100644
index 00000000..61c23917
Binary files /dev/null and b/swh/web/static/img/swh-vault.png differ
diff --git a/swh/web/templates/api-endpoints.html b/swh/web/templates/api-endpoints.html
index 399156a2..77f6f916 100644
--- a/swh/web/templates/api-endpoints.html
+++ b/swh/web/templates/api-endpoints.html
@@ -1,84 +1,83 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2015-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 
 {% block title %} Endpoints &ndash; Software Heritage API {% endblock %}
 
+{% block navbar-content %}
+<div class="bread-crumbs">
+  <ul>
+    <li><a href="/api/"><h4>Web API</h4></a></li>
+    <li class="bc-no-root"><i class="fa fa-caret-right fa-fw" aria-hidden="true"></i></li>
+    <li class="bc-no-root">endpoints</li>
+  </ul>
+</div>
+{% endblock %}
+
 {% block content %}
-<div class="card">
-  <div class="card-header bg-gray-light">
-    <nav class="bread-crumbs">
-      <ul>
-        <li><a href="/api/">Software Heritage API</a></li>
-        <li><i class="fa fa-caret-right fa-fw" aria-hidden="true"></i></li>
-        <li>endpoints</li>
-      </ul>
-    </nav>
-  </div>
-  <div class="card-body">
     <div class="swh-api-doc">
       <p>
         Below you can find a list of the available endpoints for version 1 of the
         Software Heritage API. For a more general introduction please refer to
         the <a href="/api/">API overview</a>.
       </p>
 
       <p>
         Endpoints marked "available" are considered stable for the current version
         of the API; endpoints marked "upcoming" are work in progress that will be
         stabilized in the near future.
       </p>
 
       <noscript>
         <ul>
           {% for route, doc in doc_routes %}
             <li><a href="#{{ route }}">{{ route }}</a></li>
           {% endfor %}
         </ul>
       </noscript>
     </div>
 
     <div class="swh-api-doc table-responsive">
       <table class="table table-striped search-res swh-table">
         <col width="200">
         <thead class="thead-default">
           <th>Endpoint</th>
           <th>Status</th>
           <th>Description</th>
         </thead>
         <tbody>
           {% for route, doc in doc_routes %}
             <tr class="swh-api-doc-route {% for tag in doc.tags %} swh-api-doc-route-{{ tag }} {% endfor %}">
               {% if doc.tags|length > 0 %}
                 <td id="{{ route }}">{% url doc.route_view_name %}</td>
                 <td>{{ doc.tags|join:', ' }}</td>
               {% else %}
                 <td id="{{ route }}"><a href="{% url doc.route_view_name %}">{% url doc.route_view_name %}</a></td>
                 <td>available</td>
               {% endif %}
               <td>{{ doc.doc_intro | safe_docstring_display | safe }}</td>
             </tr>
           {% endfor %}
         </tbody>
       </table>
     </div>
-  </div>
-</div>
 
 <script type="text/javascript">
+  swh.webapp.initPage('api');
+  swh.webapp.highlightCode(false);
   $(document).ready(function() {
     $('table.swh-table').DataTable({
       "paging": false,
       "info": false,
       "order": [[1, "asc"]]
     });
   });
 </script>
 {% endblock %}
diff --git a/swh/web/templates/api.html b/swh/web/templates/api.html
index 60d3d225..cde81b5b 100644
--- a/swh/web/templates/api.html
+++ b/swh/web/templates/api.html
@@ -1,23 +1,23 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2015-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% block title %} Overview &ndash; Software Heritage API {% endblock %}
 
+{% block navbar-content %}
+<h4>Web API</h4>
+{% endblock %}
+
 {% block content %}
-<div class="card">
-  <div class="card-header bg-gray-light">
-    <h4>Software Heritage Web API</h4>
-  </div>
-  <div class="card-body">
-    <div class="swh-api-doc">
-      {% include 'includes/apidoc-header.html' %}
-    </div>
+  <div class="swh-api-doc">
+    {% include 'includes/apidoc-header.html' %}
   </div>
-</div>
+  <script>
+      swh.webapp.initPage('api');
+    </script>
 {% endblock %}
diff --git a/swh/web/templates/apidoc.html b/swh/web/templates/apidoc.html
index 6d8ac1aa..de129272 100644
--- a/swh/web/templates/apidoc.html
+++ b/swh/web/templates/apidoc.html
@@ -1,161 +1,159 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2015-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 {% load render_bundle from webpack_loader %}
 
 {% block title %}{{ heading }} &ndash; Software Heritage API {% endblock %}
 
+{% block navbar-content %}
+<nav class="bread-crumbs">
+  <ul>
+    <li><a href="/api/"><h4>Web API</h4></a></li>
+    <li class="bc-no-root"><i class="fa fa-caret-right fa-fw" aria-hidden="true"></i></li>
+    <li class="bc-no-root"><a href="/api/1/">endpoints</a></li>
+    {% for endpoint in endpoint_path %}
+      <li class="bc-no-root"><i class="fa fa-caret-right fa-fw" aria-hidden="true"></i></li>
+      <li class="bc-no-root"><a href="{{ '/api/1/'|add:endpoint.path }}">{{ endpoint.name }}</a></li>
+    {% endfor %}
+  </ul>
+</nav>
+{% endblock %}
+
 {% block content %}
-<div class="card swh-api-doc">
-  <div class="card-header bg-gray-light">
-    <nav class="bread-crumbs">
-      <ul>
-        <li><a href="/api/">Software Heritage API</a></li>
-        <li><i class="fa fa-caret-right fa-fw" aria-hidden="true"></i></li>
-        <li><a href="/api/1/">endpoints</a></li>
-        {% for endpoint in endpoint_path %}
-          <li><i class="fa fa-caret-right fa-fw" aria-hidden="true"></i></li>
-          <li><a href="{{ '/api/1/'|add:endpoint.path }}">{{ endpoint.name }}</a></li>
-        {% endfor %}
-      </ul>
-    </nav>
-  </div>
-  <div class="card-body">
 
-    {% if docstring %}
-      <div class="docstring">
-        <h4> Description </h4>
-        {{ docstring | safe_docstring_display | safe }}
-      </div>
-    {% endif %}
-    {% if response_data  %}
-      <div class="response-data">
-        <h4>Request</h4>
-        <pre><strong>{{ request.method }}</strong> {{ request.absolute_uri }}</pre>
-        <hr/>
-        <h4>Response</h4>
-        {% if status_code != 200 %}
-          <h5>Status Code</h5>
-          <pre class="error">{{ status_code }}</pre>
-        {% endif %}
-        {% if headers_data %}
-          <h5>Headers</h5>
-          {% for header_name, header_value in headers_data.items %}
-            <pre><strong>{{ header_name }}</strong> {{ header_value | urlize_header_links | safe }}</pre>
-          {% endfor %}
-        {% endif %}
-        <h5>Body</h5>
-        <pre>
-          <code class="json">{{ response_data | urlize_links_and_mails | safe }}</code>
-        </pre>
-      </div>
-    {% endif %}
-    <hr/>
-    {% if urls and urls|length > 0 %}
-      <div class="swh-api-doc-urls">
-        <table class="m-x-auto table">
-          <thead>
-            <tr>
-              <th>URL</th>
-              <th>Allowed Methods</th>
-            </tr>
-          </thead>
-          <tbody>
-            {% for url in urls %}
-              <tr>
-                <td>{{ url.rule }}</td>
-                <td>{{ url.methods | dictsort:0 | join:', ' }}</td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
-      </div>
-      <hr/>
-    {% endif %}
-    {% if args and args|length > 0 %}
-      <div class="swh-api-doc-args">
-        <h4> Arguments </h4>
-        {% for arg in args %}
-          <dl class="swh-api-doc-argslist row">
-            <dt class="col col-md-2"> {{ arg.name }}: {{ arg.type }} </dt>
-            <dd class="col col-md-9"> {{ arg.doc | safe_docstring_display | safe }} </dd>
-          </dl>
-        {% endfor %}
-      </div>
-      <hr/>
-    {% endif %}
-    {% if params and params|length > 0 %}
-      <div class="swh-api-doc-params">
-        <h4> Parameters </h4>
-        {% for param in params %}
-          <dl class="swh-api-doc-paramslist row">
-            <dt class="col col-md-2"> {{ param.name }}: {{ param.type }} </dt>
-            <dd class="col col-md-9"> {{ param.doc | safe_docstring_display | safe }} </dd>
-          </dl>
-        {% endfor %}
-      </div>
-      <hr/>
-    {% endif %}
-    {% if headers and headers|length > 0 %}
-      <div class="swh-api-doc-headers">
-        <h4> Headers </h4>
-        {% for header in headers %}
-          <dl class="swh-api-doc-headers row">
-            <dt class="col col-md-2"> {{ header.name }}: string </dt>
-            <dd class="col col-md-9"> {{ header.doc | safe_docstring_display | safe }} </dd>
-          </dl>
-        {% endfor %}
-      </div>
+{% if docstring %}
+  <div class="docstring">
+    <h4> Description </h4>
+    {{ docstring | safe_docstring_display | safe }}
+  </div>
+{% endif %}
+{% if response_data  %}
+  <div class="response-data">
+    <h4>Request</h4>
+    <pre><strong>{{ request.method }}</strong> {{ request.absolute_uri }}</pre>
     <hr/>
+    <h4>Response</h4>
+    {% if status_code != 200 %}
+      <h5>Status Code</h5>
+      <pre class="error">{{ status_code }}</pre>
     {% endif %}
-    {% if returns and returns|length > 0 %}
-      <div class="swh-api-doc-return">
-        <h4> Returns </h4>
-        {% for return in returns %}
-        <dl class="swh-api-doc-return row">
-          <dt class="col col-md-2"> {{ return.type }} </dt>
-          <dd class="col col-md-9"> {{ return.doc | safe_docstring_display | safe }} </dd>
-        </dl>
-        {% endfor %}
-      </div>
-      <hr/>
-    {% endif %}
-    {% if excs and excs|length > 0 %}
-      <div class="swh-api-doc-excs">
-        <h4> Errors </h4>
-        {% for exc in excs %}
-          <dl class="swh-api-doc-excslist row">
-            <dt class="col col-md-2"> {{ exc.exc }} </dt>
-            <dd class="col col-md-9"> {{ exc.doc | safe_docstring_display | safe }} </dd>
-          </dl>
-        {% endfor %}
-      </div>
-      <hr/>
+    {% if headers_data %}
+      <h5>Headers</h5>
+      {% for header_name, header_value in headers_data.items %}
+        <pre><strong>{{ header_name }}</strong> {{ header_value | urlize_header_links | safe }}</pre>
+      {% endfor %}
     {% endif %}
-    {% if examples and examples|length > 0 %}
-      <div class="swh-api-doc-example">
-        <h4> Examples </h4>
-        {% for example in examples %}
-          <dl class="swh-api-doc-example row">
-            <dt class="col col-md-2"></dt>
-            <dd class="col col-md-9">
-              <a href="{{ example }}">{{ example }}</a>
-            </dd>
-          </dl>
+    <h5>Body</h5>
+    <pre>
+      <code class="json">{{ response_data | urlize_links_and_mails | safe }}</code>
+    </pre>
+  </div>
+{% endif %}
+<hr/>
+{% if urls and urls|length > 0 %}
+  <div class="swh-api-doc-urls">
+    <table class="m-x-auto table">
+      <thead>
+        <tr>
+          <th>URL</th>
+          <th>Allowed Methods</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for url in urls %}
+          <tr>
+            <td>{{ url.rule }}</td>
+            <td>{{ url.methods | dictsort:0 | join:', ' }}</td>
+          </tr>
         {% endfor %}
-      </div>
-    {% endif %}
+      </tbody>
+    </table>
+  </div>
+  <hr/>
+{% endif %}
+{% if args and args|length > 0 %}
+  <div class="swh-api-doc-args">
+    <h4> Arguments </h4>
+    {% for arg in args %}
+      <dl class="swh-api-doc-argslist row">
+        <dt class="col col-md-2"> {{ arg.name }}: {{ arg.type }} </dt>
+        <dd class="col col-md-9"> {{ arg.doc | safe_docstring_display | safe }} </dd>
+      </dl>
+    {% endfor %}
+  </div>
+  <hr/>
+{% endif %}
+{% if params and params|length > 0 %}
+  <div class="swh-api-doc-params">
+    <h4> Parameters </h4>
+    {% for param in params %}
+      <dl class="swh-api-doc-paramslist row">
+        <dt class="col col-md-2"> {{ param.name }}: {{ param.type }} </dt>
+        <dd class="col col-md-9"> {{ param.doc | safe_docstring_display | safe }} </dd>
+      </dl>
+    {% endfor %}
+  </div>
+  <hr/>
+{% endif %}
+{% if headers and headers|length > 0 %}
+  <div class="swh-api-doc-headers">
+    <h4> Headers </h4>
+    {% for header in headers %}
+      <dl class="swh-api-doc-headers row">
+        <dt class="col col-md-2"> {{ header.name }}: string </dt>
+        <dd class="col col-md-9"> {{ header.doc | safe_docstring_display | safe }} </dd>
+      </dl>
+    {% endfor %}
+  </div>
+<hr/>
+{% endif %}
+{% if returns and returns|length > 0 %}
+  <div class="swh-api-doc-return">
+    <h4> Returns </h4>
+    {% for return in returns %}
+    <dl class="swh-api-doc-return row">
+      <dt class="col col-md-2"> {{ return.type }} </dt>
+      <dd class="col col-md-9"> {{ return.doc | safe_docstring_display | safe }} </dd>
+    </dl>
+    {% endfor %}
+  </div>
+  <hr/>
+{% endif %}
+{% if excs and excs|length > 0 %}
+  <div class="swh-api-doc-excs">
+    <h4> Errors </h4>
+    {% for exc in excs %}
+      <dl class="swh-api-doc-excslist row">
+        <dt class="col col-md-2"> {{ exc.exc }} </dt>
+        <dd class="col col-md-9"> {{ exc.doc | safe_docstring_display | safe }} </dd>
+      </dl>
+    {% endfor %}
+  </div>
+  <hr/>
+{% endif %}
+{% if examples and examples|length > 0 %}
+  <div class="swh-api-doc-example">
+    <h4> Examples </h4>
+    {% for example in examples %}
+      <dl class="swh-api-doc-example row">
+        <dt class="col col-md-2"></dt>
+        <dd class="col col-md-9">
+          <a href="{{ example }}">{{ example }}</a>
+        </dd>
+      </dl>
+    {% endfor %}
   </div>
-</div>
+{% endif %}
 
 <script>
+  swh.webapp.initPage('api');
   swh.webapp.highlightCode(false);
 </script>
 {% endblock %}
diff --git a/swh/web/templates/browse-help.html b/swh/web/templates/browse-help.html
index 6abd9dcf..e6c49910 100644
--- a/swh/web/templates/browse-help.html
+++ b/swh/web/templates/browse-help.html
@@ -1,194 +1,189 @@
 {% extends "browse-layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
-{% block browse-content %}
-<div class="card">
-  <div class="card-header bg-gray-light">
-    <h4>How to browse the Software Heritage archive ?</h4>
-  </div>
-  <div class="card-body">
-
-    <ul class="list-inline">
-      <li class="list-inline-item">
-        <a href="#overview">Overview</a>
-      </li>
-      <li class="list-inline-item">
-        <a href="#uri-scheme">URI scheme</a>
-      </li>
-      <li class="list-inline-item">
-        <a href="#search-origins">Search software origins to browse</a>
-      </li>
-    </ul>
-
-    <h4 id="overview">Overview</h4>
-
-    <p>
-      This web application aims to provide HTML views to easily navigate in the Software Heritage archive. This is an ongoing development
-      and new features and improvements will be progressively added over time.
-    </p>
-
-    <h4 id="uri-scheme">URI scheme</h4>
-
-    <p>
-      The current URI scheme of that web application is described below and depends on the type of Software Heritage object to
-      browse. Its exhaustive documentation can be consulted from the official
-      <a href="https://docs.softwareheritage.org/devel/swh-web/uri-scheme-browse.html">
-        Software Heritage development documentation
-      </a>
-    </p>
-
-    <h5>Context-independent browsing</h5>
-
-    <p>
-      Context-independent URLs provide information about objects (e.g., revisions, directories, contents, persons, …), independently
-      of the contexts where they have been found (e.g., specific software origins, branches, commits, …).
-    </p>
-
-    <p>
-      Below are some examples of endpoints used to just render the corresponding information for user consumption:
-    </p>
+{% block navbar-content %}
+<h4>How to browse the archive ?</h4>
+{% endblock %}
 
+{% block browse-content %}
+<ul class="list-inline">
+  <li class="list-inline-item">
+    <a href="#overview">Overview</a>
+  </li>
+  <li class="list-inline-item">
+    <a href="#uri-scheme">URI scheme</a>
+  </li>
+  <li class="list-inline-item">
+    <a href="#search-origins">Search software origins to browse</a>
+  </li>
+</ul>
+
+<h4 id="overview">Overview</h4>
+
+<p>
+  This web application aims to provide HTML views to easily navigate in the Software Heritage archive. This is an ongoing development
+  and new features and improvements will be progressively added over time.
+</p>
+
+<h4 id="uri-scheme">URI scheme</h4>
+
+<p>
+  The current URI scheme of that web application is described below and depends on the type of Software Heritage object to
+  browse. Its exhaustive documentation can be consulted from the official
+  <a href="https://docs.softwareheritage.org/devel/swh-web/uri-scheme-browse.html">
+    Software Heritage development documentation
+  </a>
+</p>
+
+<h5>Context-independent browsing</h5>
+
+<p>
+  Context-independent URLs provide information about objects (e.g., revisions, directories, contents, persons, …), independently
+  of the contexts where they have been found (e.g., specific software origins, branches, commits, …).
+</p>
+
+<p>
+  Below are some examples of endpoints used to just render the corresponding information for user consumption:
+</p>
+
+<ul>
+  <li>
+    Display a
+    <b>content</b> from its checksum:
+    <a href="{% url 'browse-content' 'sha1:4dfc4478b1d5f7388b298fdfc06802485bdeae0c' %}">
+      {% url 'browse-content' 'sha1:4dfc4478b1d5f7388b298fdfc06802485bdeae0c' %}
+    </a>
+  </li>
+  <li>
+    Display a
+    <b>directory</b> from its
+    <i>sha1_git</i> identifier:
+
+    <a href="{% url 'browse-directory' '977fc4b98c0e85816348cebd3b12026407c368b6' %}">
+      {% url 'browse-directory' '977fc4b98c0e85816348cebd3b12026407c368b6' %}
+    </a>
+    <br/> (see the
+    <a href="https://docs.softwareheritage.org/devel/swh-model/apidoc/swh.model.html#swh.model.identifiers.directory_identifier">documentation</a> to get more details about how it is computed)
+  </li>
+  <li>
+    Display information about a
+    <b>revision</b> from its
+    <i>sha1_git</i> identifier:
+
+    <a href="{% url 'browse-revision' 'f1b94134a4b879bc55c3dacdb496690c8ebdc03f' %}">
+      {% url 'browse-revision' 'f1b94134a4b879bc55c3dacdb496690c8ebdc03f' %}
+    </a>
+    <br/> (see the
+    <a href="https://docs.softwareheritage.org/devel/swh-model/apidoc/swh.model.html#swh.model.identifiers.revision_identifier">documentation</a> to get more details about how it is computed)
+  </li>
+  <li>
+    Display information about a
+    <b>snapshot</b> from its
+    <i>sha1</i> identifier:
+
+    <a href="{% url 'browse-snapshot' 'baebc2109e4a2ec22a1129a3859647e191d04df4' %}">
+      {% url 'browse-snapshot' 'baebc2109e4a2ec22a1129a3859647e191d04df4' %}
+    </a>
+    <br/> (see the
+    <a href="https://docs.softwareheritage.org/devel/swh-model/apidoc/swh.model.html#swh.model.identifiers.snapshot_identifier">documentation</a> to get more details about how it is computed)
+  </li>
+</ul>
+
+<p>
+  Where hyperlinks are created when browsing these kind of endpoints, they always point to other context-independent browsing
+  URLs.
+</p>
+
+<h5>Context-dependent browsing</h5>
+
+<p>
+  Context-dependent URLs provide information about objects, limited to specific contexts where the objects have been found.
+</p>
+
+<p>
+  Currently, browsing the Software Heritage objects in the context of an
+  <b>origin</b> is available. Below are some examples of such endpoints:
+</p>
+
+<ul>
+  <li>
+    Display information about the visits of a software
+    <b>origin</b>:
     <ul>
-      <li>
-        Display a
-        <b>content</b> from its checksum:
-        <a href="{% url 'browse-content' 'sha1:4dfc4478b1d5f7388b298fdfc06802485bdeae0c' %}">
-          {% url 'browse-content' 'sha1:4dfc4478b1d5f7388b298fdfc06802485bdeae0c' %}
-        </a>
-      </li>
-      <li>
-        Display a
-        <b>directory</b> from its
-        <i>sha1_git</i> identifier:
 
-        <a href="{% url 'browse-directory' '977fc4b98c0e85816348cebd3b12026407c368b6' %}">
-          {% url 'browse-directory' '977fc4b98c0e85816348cebd3b12026407c368b6' %}
-        </a>
-        <br/> (see the
-        <a href="https://docs.softwareheritage.org/devel/swh-model/apidoc/swh.model.html#swh.model.identifiers.directory_identifier">documentation</a> to get more details about how it is computed)
-      </li>
       <li>
-        Display information about a
-        <b>revision</b> from its
-        <i>sha1_git</i> identifier:
-
-        <a href="{% url 'browse-revision' 'f1b94134a4b879bc55c3dacdb496690c8ebdc03f' %}">
-          {% url 'browse-revision' 'f1b94134a4b879bc55c3dacdb496690c8ebdc03f' %}
+        <a href="{% url 'browse-origin-visits' 'git' 'https://github.com/torvalds/linux' %}">
+          {% url 'browse-origin-visits' 'git' 'https://github.com/torvalds/linux' %}
         </a>
-        <br/> (see the
-        <a href="https://docs.softwareheritage.org/devel/swh-model/apidoc/swh.model.html#swh.model.identifiers.revision_identifier">documentation</a> to get more details about how it is computed)
       </li>
-      <li>
-        Display information about a
-        <b>snapshot</b> from its
-        <i>sha1</i> identifier:
 
-        <a href="{% url 'browse-snapshot' 'baebc2109e4a2ec22a1129a3859647e191d04df4' %}">
-          {% url 'browse-snapshot' 'baebc2109e4a2ec22a1129a3859647e191d04df4' %}
+      <li>
+        <a href="{% url 'browse-origin-visits' 'git' 'https://github.com/python/cpython' %}">
+          {% url 'browse-origin-visits' 'git' 'https://github.com/python/cpython' %}
         </a>
-        <br/> (see the
-        <a href="https://docs.softwareheritage.org/devel/swh-model/apidoc/swh.model.html#swh.model.identifiers.snapshot_identifier">documentation</a> to get more details about how it is computed)
       </li>
     </ul>
-
-    <p>
-      Where hyperlinks are created when browsing these kind of endpoints, they always point to other context-independent browsing
-      URLs.
-    </p>
-
-    <h5>Context-dependent browsing</h5>
-
-    <p>
-      Context-dependent URLs provide information about objects, limited to specific contexts where the objects have been found.
-    </p>
-
-    <p>
-      Currently, browsing the Software Heritage objects in the context of an
-      <b>origin</b> is available. Below are some examples of such endpoints:
-    </p>
-
+  </li>
+  <li>
+    Display the latest archived
+    <b>snapshot</b> for a software
+    <b>origin</b>:
     <ul>
+
       <li>
-        Display information about the visits of a software
-        <b>origin</b>:
-        <ul>
-
-          <li>
-            <a href="{% url 'browse-origin-visits' 'git' 'https://github.com/torvalds/linux' %}">
-              {% url 'browse-origin-visits' 'git' 'https://github.com/torvalds/linux' %}
-            </a>
-          </li>
-
-          <li>
-            <a href="{% url 'browse-origin-visits' 'git' 'https://github.com/python/cpython' %}">
-              {% url 'browse-origin-visits' 'git' 'https://github.com/python/cpython' %}
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        Display the latest archived
-        <b>snapshot</b> for a software
-        <b>origin</b>:
-        <ul>
-
-          <li>
-            <a href="{% url 'browse-origin' 'git' 'https://github.com/torvalds/linux' %}">
-              {% url 'browse-origin' 'git' 'https://github.com/torvalds/linux' %}
-            </a>
-          </li>
-
-          <li>
-            <a href="{% url 'browse-origin' 'git' 'https://github.com/python/cpython' %}">
-              {% url 'browse-origin' 'git' 'https://github.com/python/cpython' %}
-            </a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        Display a
-        <b>content</b> from an
-        <b>origin</b>:
-        <a href="{% url 'browse-origin-content' origin_type='git' origin_url='https://github.com/git/git' path='git.c' %}">
-          {% url 'browse-origin-content' origin_type='git' origin_url='https://github.com/git/git' path='git.c' %}
+        <a href="{% url 'browse-origin' 'git' 'https://github.com/torvalds/linux' %}">
+          {% url 'browse-origin' 'git' 'https://github.com/torvalds/linux' %}
         </a>
       </li>
-      <li>
-        Display a
-        <b>directory</b> from an
-        <b>origin</b>:
 
-        <a href="{% url 'browse-origin-directory' origin_type='git' origin_url='https://github.com/torvalds/linux' path='net/ethernet' %}">
-          {% url 'browse-origin-directory' origin_type='git' origin_url='https://github.com/torvalds/linux' path='net/ethernet' %}
-        </a>
-      </li>
       <li>
-        Display the
-        <b>revision history</b> (aka the commit log) from an
-        <b>origin</b>:
-
-        <a href="{% url 'browse-origin-log' origin_type='git' origin_url='https://github.com/Kitware/CMake' %}">
-          {% url 'browse-origin-log' origin_type='git' origin_url='https://github.com/Kitware/CMake' %}
+        <a href="{% url 'browse-origin' 'git' 'https://github.com/python/cpython' %}">
+          {% url 'browse-origin' 'git' 'https://github.com/python/cpython' %}
         </a>
       </li>
     </ul>
-
-    <h4 id="search-origins">Search software origins to browse</h4>
-
-    In order to facilitate the browsing of the archive and generate relevant entry points to it, a
-    <a href="{% url 'browse-search' %}">search interface</a> is available. Currently, it enables to search software origins from the URLs they were retrieved
-    from. More search criteria will be added in the future.
-
-  </div>
-</div>
+  </li>
+  <li>
+    Display a
+    <b>content</b> from an
+    <b>origin</b>:
+    <a href="{% url 'browse-origin-content' origin_type='git' origin_url='https://github.com/git/git' path='git.c' %}">
+      {% url 'browse-origin-content' origin_type='git' origin_url='https://github.com/git/git' path='git.c' %}
+    </a>
+  </li>
+  <li>
+    Display a
+    <b>directory</b> from an
+    <b>origin</b>:
+
+    <a href="{% url 'browse-origin-directory' origin_type='git' origin_url='https://github.com/torvalds/linux' path='net/ethernet' %}">
+      {% url 'browse-origin-directory' origin_type='git' origin_url='https://github.com/torvalds/linux' path='net/ethernet' %}
+    </a>
+  </li>
+  <li>
+    Display the
+    <b>revision history</b> (aka the commit log) from an
+    <b>origin</b>:
+
+    <a href="{% url 'browse-origin-log' origin_type='git' origin_url='https://github.com/Kitware/CMake' %}">
+      {% url 'browse-origin-log' origin_type='git' origin_url='https://github.com/Kitware/CMake' %}
+    </a>
+  </li>
+</ul>
+
+<h4 id="search-origins">Search software origins to browse</h4>
+
+In order to facilitate the browsing of the archive and generate relevant entry points to it, a
+<a href="{% url 'browse-search' %}">search interface</a> is available. Currently, it enables to search software origins from the URLs they were retrieved
+from. More search criteria will be added in the future.
 
 <script>
-  swh.browse.initBrowse('help');
+  swh.webapp.initPage('help');
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/swh/web/templates/browse-layout.html b/swh/web/templates/browse-layout.html
index a64a3b0a..ed7302c7 100644
--- a/swh/web/templates/browse-layout.html
+++ b/swh/web/templates/browse-layout.html
@@ -1,40 +1,23 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 {% load render_bundle from webpack_loader %}
 
 {% block title %}{{ heading }} &ndash; Software Heritage archive {% endblock %}
 
 {% block header %}
 {% render_bundle 'browse' %}
 {% render_bundle 'vault' %}
 {% endblock %}
 
-{% block navbar-content %}
-<ul class="nav navbar-nav swh-browse-nav">
-  <li class="nav-item browse-search-item">
-    <a class="nav-link browse-search-link" href="{% url 'browse-search' %}">Search</a>
-  </li>
-  <li class="nav-item browse-help-item">
-    <a class="nav-link browse-help-link" href="{% url 'browse-help' %}">Help</a>
-  </li>
-  <li class="nav-item browse-vault-item">
-    <a class="nav-link browse-vault-link" href="{% url 'browse-vault' %}">Vault</a>
-  </li>
-  <li class="nav-item browse-main-item">
-    <a class="nav-link browse-main-link" href="{% url 'browse-mainpage' %}">Browse</a>
-  </li>
-</ul>
-{% endblock %}
-
 {% block content %}
 <div class="swh-corner-ribbon">Alpha version</div>
 {% block browse-content %}{% endblock %}
 {% endblock %}
diff --git a/swh/web/templates/browse-search.html b/swh/web/templates/browse-search.html
index de715f6f..4053adcc 100644
--- a/swh/web/templates/browse-search.html
+++ b/swh/web/templates/browse-search.html
@@ -1,62 +1,61 @@
 {% extends "browse-layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load static %}
 
+{% block navbar-content %}
+<h4>Search software origins to browse</h4>
+{% endblock %}
+
 {% block browse-content %}
-<div class="card">
-  <div class="card-header bg-gray-light">
-    <div class="float-left">
-      <h4>Search Software Heritage origins to browse</h4>
-    </div>
-    <div class="swh-loading float-right">
-      <img src="{% static 'img/swh-spinner-small.gif' %}"></img>
+
+<form class="form-horizontal" id="search_origins">
+  <div class="input-group">
+    <input class="form-control" placeholder="Enter string pattern(s) to search for in origin urls" type="text" id="origins-url-patterns"/>
+    <div class="input-group-append">
+      <button class="btn btn-default" type="submit"><i class="swh-search-icon fa fa-search"></i></button>
     </div>
   </div>
-  <div class="card-body">
-    <form class="form-horizontal" id="search_origins">
-      <div class="input-group">
-        <input class="form-control" placeholder="Enter string pattern(s) to search for in origin urls" type="text" id="origins-url-patterns"/>
-        <div class="input-group-append">
-          <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
-        </div>
-      </div>
-    </form>
-
-    <div id="swh-origin-search-results" style="display: none;">
-      <div class="table-responsive">
-        <table class="table swh-table-even-odd" id="origin-search-results">
-          <thead>
-            <tr>
-              <th>Origin type</th>
-              <th>Origin browse url</th>
-              <th>Visit status</th>
-            </tr>
-          </thead>
-          <tbody></tbody>
-        </table>
-      </div>
-    </div>
-    <p id="swh-no-origins-found" style="display: none;">
-      <br/>
-      No origins matching the search criteria were found
-    </p>
+</form>
+
+<div id="swh-origin-search-results" style="display: none;">
+  <div class="table-responsive">
+    <table class="table swh-table-even-odd" id="origin-search-results">
+      <thead>
+        <tr>
+          <th>Origin type</th>
+          <th>Origin browse url</th>
+          <th>Visit status</th>
+        </tr>
+      </thead>
+      <tbody>
+      </tbody>
+    </table>
   </div>
 </div>
+<div class="swh-loading">
+  <img src="{% static 'img/swh-spinner.gif' %}"></img>
+  <p>Searching origins ...</p>
+</div>
+<p id="swh-no-origins-found" style="display: none;">
+  <br/>
+  No origins matching the search criteria were found
+</p>
+
 
-<ul class="pagination justify-content-center">
+<ul class="pagination justify-content-center swh-search-pagination">
   <li class="disabled page-item" id="origins-prev-results-button"><a class="page-link" tabindex="-1">Previous</a></li>
   <li class="disabled page-item" id="origins-next-results-button"><a class="page-link" tabindex="-1">Next</a></li>
 </ul>
 
 <script>
-  swh.browse.initBrowse('search');
+  swh.webapp.initPage('search');
   swh.browse.initOriginSearch();
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/swh/web/templates/browse-vault-ui.html b/swh/web/templates/browse-vault-ui.html
index 05f8595d..d013821f 100644
--- a/swh/web/templates/browse-vault-ui.html
+++ b/swh/web/templates/browse-vault-ui.html
@@ -1,48 +1,45 @@
 {% extends "browse-layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load render_bundle from webpack_loader %}
 
+{% block navbar-content %}
+<h4>Download archive content from the Vault</h4>
+{% endblock %}
+
 {% block browse-content %}
-<div class="card">
-  <div class="card-header bg-gray-light">
-    <h4>Download content from the Software Heritage Vault</h4>
-  </div>
-  <div class="card-body">
-    <p>
-      This interface enables to track the status of the different Software Heritage
-      Vault cooking tasks created while browsing the archive.
-    </p>
-    <p>
-      Once a cooking task is finished, a link will be made available in order to
-      download the associated archive.
-    </p>
-    <button type="button" class="btn btn-default btn-sm" id="vault-remove-tasks">Remove selected tasks</button>
-    <div class="table-responsive">
-      <table class="table swh-vault-table" id="vault-cooking-tasks">
-        <thead>
-          <tr>
-            <th><input type="checkbox" id="vault-tasks-toggle-selection"/></th>
-            <th style="width: 100px">Object type</th>
-            <th>Object id</th>
-            <th style="width: 350px">Cooking status</th>
-            <th style="width: 320px"></th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
-    </div>
-  </div>
+<p>
+  This interface enables to track the status of the different Software Heritage
+  Vault cooking tasks created while browsing the archive.
+</p>
+<p>
+  Once a cooking task is finished, a link will be made available in order to
+  download the associated archive.
+</p>
+<button type="button" class="btn btn-default btn-sm" id="vault-remove-tasks">Remove selected tasks</button>
+<div class="table-responsive">
+  <table class="table swh-vault-table" id="vault-cooking-tasks">
+    <thead>
+      <tr>
+        <th><input type="checkbox" id="vault-tasks-toggle-selection"/></th>
+        <th style="width: 100px">Object type</th>
+        <th>Object id</th>
+        <th style="width: 350px">Cooking status</th>
+        <th style="width: 320px"></th>
+      </tr>
+    </thead>
+    <tbody></tbody>
+  </table>
 </div>
 
 <script>
-  swh.browse.initBrowse('vault');
+  swh.webapp.initPage('vault');
   swh.vault.initUi();
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/swh/web/templates/browse.html b/swh/web/templates/browse.html
index 03d3ef5a..23897ccd 100644
--- a/swh/web/templates/browse.html
+++ b/swh/web/templates/browse.html
@@ -1,49 +1,46 @@
 {% extends "browse-layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load swh_templatetags %}
 
 {% block title %}{{ heading }} &ndash; Software Heritage archive{% endblock %}
 
+{% block navbar-content %}
+<h4>Browse the archive</h4>
+{% endblock %}
+
 {% block browse-content %}
 
 {% if empty_browse %}
 
-  <div class="card">
-    <div class="card-header bg-gray-light">
-      <h4>Browse the Software Heritage archive</h4>
-    </div>
-    <div class ="card-body">
-      <p>
-        No Software Heritage object currently browsed.
-        <br/>
-        To browse the content of the archive, you can either use
-        the <a href="{% url 'browse-search' %}">Search</a> interface or refer to the URI scheme described
-        in the <a href="{% url 'browse-help' %}">Help</a> page.
-      </p>
-    </div>
-  </div>
+<p>
+  No Software Heritage object currently browsed.
+  <br/>
+  To browse the content of the archive, you can either use
+  the <a href="{% url 'browse-search' %}">Search</a> interface or refer to the URI scheme described
+  in the <a href="{% url 'browse-help' %}">Help</a> page.
+</p>
 
 {% else %}
 
   {% block swh-browse-before-content %}{% endblock %}
 
   <div class="card">
     {% block swh-browse-content %}{% endblock %}
   </div>
 
   {% block swh-browse-after-content %}{% endblock %}
 
 {% endif %}
 
 <script>
-  swh.browse.initBrowse('main');
+  swh.webapp.initPage('browse');
 </script>
 
 {% endblock %}
diff --git a/swh/web/templates/error.html b/swh/web/templates/error.html
index b6797725..79aebe63 100644
--- a/swh/web/templates/error.html
+++ b/swh/web/templates/error.html
@@ -1,39 +1,43 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load static %}
 
 {% block title %}Error {{ error_code }} &ndash; Software Heritage archive {% endblock %}
 
+{% block navbar-content %}
+<h4>Error</h4>
+{% endblock %}
+
 {% block content %}
 <div class="swh-http-error">
   <div class="swh-http-error-head">Error</div>
   <div class="swh-http-error-code">
     <img class="hidden-xs" src="{% static 'img/swh-logo.svg' %}" style="width:80px; height:auto;"/>
     {{ error_code }}
     <img class="hidden-xs" src="{% static 'img/swh-logo.svg' %}" style="width:80px; height:auto;"/>
   </div>
   <h3>{{ error_message }}</h3>
 
   <div class="swh-http-error-desc">
     <pre>{{ error_description }}</pre>
     <div>
       <a class="btn" onclick="window.history.back();">
         <i class="fa fa-arrow-left"></i>
         Go back to previous page
       </a>
       or
       <a class="btn" href="{% url 'swh-web-homepage' %}">
         <i class="fa fa-arrow-left"></i>
         Go back to homepage
       </a>
     </div>
   </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/swh/web/templates/homepage.html b/swh/web/templates/homepage.html
index 29b7fba6..a881cab4 100644
--- a/swh/web/templates/homepage.html
+++ b/swh/web/templates/homepage.html
@@ -1,116 +1,123 @@
 {% extends "layout.html" %}
 
 {% comment %}
 Copyright (C) 2017-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 {% load static %}
 
 {% block title %}The Software Heritage archive{% endblock %}
 
+{% block navbar-content %}
+
+<h4>Welcome to the Software Heritage archive</h4>
+
+{% endblock %}
+
 {% block content %}
-<h2>Welcome to the Software Heritage archive</h2>
 
 <h4>Overview</h4>
 
 <p>
   The long term goal of the Software Heritage initiative is to <strong>collect</strong>
   all publicly available software in source code form together with its
   development history, replicate it massively to ensure its <strong>preservation</strong>,
   and <strong>share</strong> it with everyone who needs it.
 
   The Software Heritage archive is growing over time as we crawl new source code from software
   projects and development forges. We will incrementally release archive search
   and browse functionalities — as of now you can check whether source code you care
   about is already present in the archive or not.
 </p>
 
 <h4>Content</h4>
 
 <p>
   A significant amount of source code has already been ingested in the Software Heritage
   archive. It currently includes:
   <ul>
     <li>public repositories from <a href="https://github.com">GitHub</a></li>
     <li>public repositories from the former <a href="https://gitorious.org/">Gitorious</a> code hosting service</li>
     <li>public repositories from the former <a href="https://code.google.com/archive/">Google Code</a> project hosting service</li>
     <li>source packages from the <a href="https://www.debian.org">Debian</a> distribution (as of August 2015, via the snapshot service)</li>
     <li>releases from the <a href="https://www.gnu.org">GNU</a> project (as of August 2015)</li>
   </ul>
 </p>
 
 <h4>Size</h4>
 
 <p>
   As of today the archive already contains and keeps safe for you the following amount
   of objects:
 
   <div class="row">
     <div class="col-md-2" align="center">
       <h5>Source files</h5>
       <span id="nb-files" class="swh-counter"></span>
     </div>
     <div class="col-md-2" align="center">
       <h5>Directories</h5>
         <span id="nb-dirs" class="swh-counter"></span>
       </div>
     <div class="col-md-2" align="center">
       <h5>Commits</h5>
       <span id="nb-commits" class="swh-counter"></span>
     </div>
     <div class="col-md-2" align="center">
       <h5>Authors</h5>
       <span id="nb-authors" class="swh-counter"></span>
     </div>
     <div class="col-md-2" align="center">
       <h5>Projects</h5>
       <span id="nb-projects" class="swh-counter"></span>
     </div>
     <div class="col-md-2" align="center">
       <h5>Releases</h5>
       <span id="nb-releases" class="swh-counter"></span>
     </div>
   </div>
 </p>
 
 <h4>Access</h4>
 
-<div class="row">
-  <div class="col-md-3" align="center"></div>
-  <div class="col-md-3 swh-web-app-link" align="center">
-    <a href="{% url 'api-homepage' %}">
-      <img id="swh-web-api-img" alt="Software Heritage Web API" src="{% static 'img/swh-api.png' %}"/>
-      <h5>Web API</h5>
-      <p>Query the archive programmatically using a RESTful API.</p>
-    </a>
-  </div>
-  <div class="col-md-3 swh-web-app-link" align="center">
-    <a href="{% url 'browse-search' %}">
-      <img alt="Browse the Software Heritage archive" src="{% static 'img/swh-browse.png' %}"/>
-      <h5>Browse</h5>
-      <p>Explore the archive using a dedicated web interface.</p>
-    </a>
+<p>
+  <div class="row">
+    <div class="col-md-3" align="center"></div>
+    <div class="col-md-3 swh-web-app-link" align="center">
+      <a href="{% url 'api-homepage' %}">
+        <img id="swh-web-api-img" alt="Software Heritage Web API" src="{% static 'img/swh-api.png' %}"/>
+        <h5>Web API</h5>
+        <p>Query the archive programmatically using a RESTful API.</p>
+      </a>
+    </div>
+    <div class="col-md-3 swh-web-app-link" align="center">
+      <a href="{% url 'browse-search' %}">
+        <img alt="Browse the Software Heritage archive" src="{% static 'img/swh-browse.png' %}"/>
+        <h5>Browse</h5>
+        <p>Explore the archive using a dedicated web interface.</p>
+      </a>
+    </div>
+    <div class="col-md-3" align="center"></div>
   </div>
-  <div class="col-md-3" align="center"></div>
-</div>
+</p>
 
 <script>
   $(document).ready(function() {
     $.ajax({
       url: Urls.stat_counters(),
       dataType: 'json',
       success: function (data) {
         $('#nb-files').html(data.content.toLocaleString());
         $('#nb-commits').html(data.revision.toLocaleString());
         $('#nb-projects').html(data.origin.toLocaleString());
         $('#nb-dirs').html(data.directory.toLocaleString());
         $('#nb-authors').html(data.person.toLocaleString());
         $('#nb-releases').html(data.release.toLocaleString());
       }
     });
   });
 </script>
 {% endblock %}
diff --git a/swh/web/templates/layout.html b/swh/web/templates/layout.html
index 640d2570..c849e298 100644
--- a/swh/web/templates/layout.html
+++ b/swh/web/templates/layout.html
@@ -1,91 +1,139 @@
 {% comment %}
 Copyright (C) 2015-2018  The Software Heritage developers
 See the AUTHORS file at the top-level directory of this distribution
 License: GNU Affero General Public License version 3, or any later version
 See top-level LICENSE file for more information
 {% endcomment %}
 
 <!DOCTYPE html>
 
 {% load static %}
 {% load render_bundle from webpack_loader %}
 
 <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>{% block title %}{% endblock %}</title>
 
     {% render_bundle 'vendors' %}
     {% render_bundle 'webapp' %}
 
     <script src="{% url 'js_reverse' %}" type="text/javascript"></script>
 
     {% block header %}{% endblock %}
 
     <link rel="icon" href="{% static 'img/icons/swh-logo-32x32.png' %}" sizes="32x32" />
     <link rel="icon" href="{% static 'img/icons/swh-logo-archive-192x192.png' %}" sizes="192x192" />
     <link rel="apple-touch-icon-precomposed" href="{% static 'img/icons/swh-logo-archive-180x180.png' %}" />
     <meta name="msapplication-TileImage" content="{% static 'img/icons/swh-logo-archive-270x270.png' %}" />
   </head>
-  <body>
-    <header>
+
+  <body class="hold-transition sidebar-mini">
+    <div class="wrapper">
       <a id="top"></a>
       <div class="swh-top-bar">
         <ul>
           <li>
             <a href="https://www.softwareheritage.org">Project</a>
           </li>
           <li>
               <a class="swh-current-site" href="https://archive.softwareheritage.org">Archive</a>
           </li>
           <li>
               <a href="https://docs.softwareheritage.org/devel/">Documentation</a>
           </li>
           <li class="float-right">
             <a class="swh-donate-link" href="https://www.softwareheritage.org/donate">Donate</a>
           </li>
         </ul>
       </div>
-      <nav class="navbar navbar-expand-lg navbar-light navbar-static-top" id="swh-navbar-collapse">
+      <nav class="main-header navbar navbar-expand-lg navbar-light navbar-static-top" id="swh-navbar">
         <div class="navbar-header">
-          <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#swh-collapse-navbar" aria-expanded="false">
-            <span class="navbar-toggler-icon"></span>
-          </button>
-          <a class="navbar-brand" href="{% url 'swh-web-homepage' %}">
-            <img alt="SWH Archive" src="{% static 'img/swh-logo-archive.png' %}" width="40" height="40"/>
-          </a>
-          <a class="navbar-brand sitename" href="{% url 'swh-web-homepage' %}">
-            <span class="first-word">Software</span> <span class="second-word">Heritage</span>
-          </a>
+          <a class="nav-link swh-push-menu" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
         </div>
-        <div class="collapse navbar-collapse" id="swh-collapse-navbar">
-          {% block navbar-content %}{% endblock %}
+        <div class="navbar">
+          <div class="swh-navbar-content">
+            {% block navbar-content %}{% endblock %}
+          </div>
         </div>
       </nav>
-    </header>
+    </div>
+
+    <aside class="swh-sidebar main-sidebar sidebar-light-primary elevation-4">
+      <a href="{% url 'swh-web-homepage' %}" class="brand-link">
+        <img class="brand-image" src="{% static 'img/swh-logo-archive.png' %}" alt="SWH Logo">
+        <div class="brand-text sitename" href="{% url 'swh-web-homepage' %}">
+          <span class="first-word">Software</span> <span class="second-word">Heritage</span>
+        </div>
+      </a>
 
-    <main role="main" class="container">
-      {% block content %}{% endblock %}
-    </main>
+      <div class="sidebar">
+        <nav class="mt-2">
+          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+            <li class="nav-header">Archive Access</li>
+            <li class="nav-item swh-api-item" title="Query the archive programmatically using a RESTful API">
+              <a href="{% url 'api-homepage' %}" class="nav-link swh-api-link">
+                <img class="nav-icon" src="{% static 'img/swh-api.png' %}"/>
+                <p>Web API</p>
+              </a>
+            </li>
+            <li class="nav-item swh-browse-item" title="Explore the archive using a dedicated web interface">
+              <a href="{% url 'browse-mainpage' %}" class="nav-link swh-browse-link">
+                <img class="nav-icon" src="{% static 'img/swh-browse.png' %}"/>
+                <p>Browse</p>
+              </a>
+            </li>
+            <li class="nav-header">Features</li>
+            <li class="nav-item swh-search-item" title="Search software origins to browse">
+              <a href="{% url 'browse-search' %}" class="nav-link swh-search-link">
+                <i style="color: #e20026;" class="nav-icon fa fa-search"></i>
+                <p>Search</p>
+              </a>
+            </li>
+            <li class="nav-item swh-vault-item" title="Download archive content from the Vault">
+              <a href="{% url 'browse-vault' %}" class="nav-link swh-vault-link">
+                <img class="nav-icon" src="{% static 'img/swh-vault.png' %}"/>
+                <p>Vault</p>
+              </a>
+            </li>
+            <li class="nav-header">Miscellaneous</li>
+            <li class="nav-item swh-help-item" title="How to browse the archive ?">
+              <a href="{% url 'browse-help' %}" class="nav-link swh-help-link">
+                <i style="color: #e20026;" class="nav-icon fa fa-question"></i>
+                <p>Help</p>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </aside>
+
+    <div class="content-wrapper">
+      <section class="content">
+        <div class="container">
+          {% block content %}{% endblock %}
+        </div>
+      </section>
+    </div>
 
     <footer class="footer">
       <div class="container text-center">
         <a href="https://www.softwareheritage.org">Software Heritage</a> &mdash;
         Copyright (C) 2015&ndash;{% now "Y" %}, The Software Heritage developers.
         License: <a href="https://www.gnu.org/licenses/agpl.html">GNU
         AGPLv3+</a>. <br /> The source code of Software Heritage <em>itself</em>
         is available on
         our <a href="https://forge.softwareheritage.org/">development
         forge</a>. <br /> The source code files <em>archived</em> by Software
         Heritage are available under their own copyright and licenses. <br />
         <a href="https://www.softwareheritage.org/software-heritage-api-terms-of-use/">Terms of use</a> -
         <a href="https://www.softwareheritage.org/contact/">Contact</a>.
       </div>
     </footer>
     <div id="back-to-top">
       <a href="#top"><img alt="back to top" src="{% static 'img/arrow-up-small.png' %}" /></a>
     </div>
   </body>
 </html>